<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head> 
		
		<!--
			PROJECT: scsu-csc653-chatter
			ABOUT: index html file - pretty much the whole UI
			DATE: 09-2010
			AUTHORS: skenny214@gmail.com, jinhongli08@gmail.com, hourigan.brian@gmail.com, yaqiluo2010@gmail.com
		-->
		
		<!-- set some html meta infos -->
		<title>Chatter - Client</title>
		<link rel="icon" href="favicon.ico" type="image/x-icon"> 
		
		<!-- load in our chatter specific global css file -->
		<link type="text/css" rel="stylesheet" href="css/chatter.css" />
		<!-- load in a jquery ui theme -->
		<link type="text/css" rel="stylesheet" href="css/ui-lightness/jquery-ui-1.8.5.custom.css" />
		
		
		<!-- load in jquery and jquery ui goodies from the google cdn -->
		<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js"></script>
		
		<!-- load in integral js files for the the chatter services -->
		<script src="scripts/messages.js"></script>
		<script src="scripts/users.js"></script>
		<script src="scripts/chatter.js"></script>
		
		<script type="text/javascript">
		</script>

 	</head>

	<body>

		<!-- begin main content area - 100% height -->
		<table id="content">
			
			<!-- begin header -->
			<tr id="content-header">
				<td colspan="2">
					<div id="header">
						<h1><img id="header-logo" src="images/chatter-icon.png" /> Chatter - Say Something!</h1>
					</div>
				</td>
			</tr>		
			<!-- end header -->
			
			<!-- begin content-top -->
			<tr id="content-top">
				<td id="message" colspan=2>
					<table id="message-table">
						<tr>
							<td><div id="message-text-input-container"><input id="message-text-input" type="text" name="message" /></div></td>
							<td width="160px"><button id="send-message-button">Send message</button></td>
						</tr>
					</table>
				</td>
			</tr>
			<!-- end content-top -->
			
			<!-- begin content-bottom -->
			<tr id="content-bottom">
				
				<!-- begin content-bottom-left -->
				<td id="content-bottom-left">
					
					<div id="messages">
						<ul id="messages-list">
							
							<!-- begin mock message list items
							<li class="messages-list-item">
								<span class="messages-list-item-user">user1</span> - 
								<span class="messages-list-item-message">tur adipiscing elit. Nam nec pellentesque neque. Nam porttitor risus non odio</span>
							</li>
							<li class="messages-list-item">
								<span class="messages-list-item-user">user2</span> - 
								<span class="messages-list-item-message">ulla. Ut ut justo est. Donec id enim ac ipsum pulvinar interdum in eu felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nun</span>
							</li>
							<li class="messages-list-item">
								<span class="messages-list-item-user">user3</span> -  
								<span class="messages-list-item-message">ue tincidunt, massa quis ullamcorper bibendum, ipsum velit luctus arcu, id lacinia ligula ante nec metus. Morbi scelerisque egestas orci sed congue. Praesent at nunc eget tortor lacinia vulputate. Nunc elementum felis vel tortor convallis ut posuere augue aliquam. Duis in urna magna, a condimentum odio. Donec mollis rutrum libero in imperdiet. Nunc tortor nunc, posuere nec aliquam vel, faucibus non tortor. </span>
							</li>
							<li class="messages-list-item">
								<span class="messages-list-item-user">user1</span> - 
								<span class="messages-list-item-message">tur adipiscing elit. Nam nec pellentesque neque. Nam porttitor risus non odio</span>
							</li>
							<li class="messages-list-item">
								<span class="messages-list-item-user">user3</span>: 
								<span class="messages-list-item-message">ue tincidunt, massa quis ullamcorper bibendum, ipsum velit luctus arcu, id lacinia ligula ante nec metus. Morbi scelerisque egestas orci sed congue. Praesent at nunc eget tortor lacinia vulputate. Nunc elementum felis vel tortor convallis ut posuere augue aliquam. Duis in urna magna, a condimentum odio. Donec mollis rutrum libero in imperdiet. Nunc tortor nunc, posuere nec aliquam vel, faucibus non tortor. </span>
							</li>
							<li class="messages-list-item">
								<span class="messages-list-item-user">user2</span> -
								<span class="messages-list-item-message">ulla. Ut ut justo est. Donec id enim ac ipsum pulvinar interdum in eu felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nun</span>
							</li>
							end mock message list items -->
							
						</ul>
					</div> <!-- end messages -->
				</td>
				<!-- end content-bottom-left -->
				
				<!-- begin content-bottom-right -->
				<td id="content-bottom-right">
					
					<div id="users">
						<p id="users-list-title">Who's Here?</p>
						<ul id="users-list">
						
							<!-- begin mock user list
							<li>user1</li>
							<li>user2</li>
							<li>user3</li>
							<li>user4</li>
							<li>user5</li>
							end mock user list -->
						
						</ul>
					</div> <!-- end users -->
				</td>
				<!-- end content-bottom-right -->
				
				
			</tr>
			<!-- end content-bottom -->
			
		</table>
		<!-- end main content area - 100% height -->
		
		<!-- begin login dialog -->
		<div id="login-dialog" title="Chatter - Login">
			<p id="login-error-message" style="display: none;">There was a problem logging in to chatter. Please check your username and password and try again.</p>
			<p id="disconnect-error-message" style="display: none;">You were disconnected from the server.</p>
			
			<label>Username: </label><input id="username-text-input" type="text" name="username" />
			<br /> 
			<label>Password: </label><input id="password-text-input" type="password" name="password" />
			<br />
			<label>Chatter Server: </label><input id="host-text-input" type="text" name="host" value="localhost" />
			<br />
			<button id="start-chatting-button" style="margin-top: 10px" >Start Chatting</button>
		</div>
		<!-- end login-dialog -->
		
		
		<script src="http://www.java.com/js/deployJava.js"></script>
	    <script> 
	    	//debug stuff
	    	var isDebug = true;
	    	var appletWidth = isDebug ? 500 : 0;
	    	var appletHeight = isDebug ? 25 : 0;
	    	
	    	//setup the applet and deploy it
	        var attributes = { id:'chatter_client_applet', code:'chatter.client.ChatterClientApplet', archive:'applet/chatter-client.jar', mayscript:true, width:appletWidth, height:appletHeight}; 
	        var parameters = {jnlp_href: 'applet/chatter-client.jnlp', boxbgcolor:'#dfdfdf'} ; 
	        deployJava.runApplet(attributes, parameters, '1.6'); 
	    </script>
		
		<button id="logout-button" style="height: 25px; font-size: 12px; position: relative; top: -6px;">logout</button>
		
		
	</body>
	
</html>